<template>
	<div>
		<common-view ref="commonView" :SearchSet="searchSet" :SearchForm="searchForm" :SearchData="searchData" :TableSet="tableSet" :Columns="columns" :DialogSet="dialogSet" :DialogFormData="dialogFormData" :DialogForm="dialogForm" :RequestController="requestController" :DataList="dataList" :pageSearch="pageSearch" @handleQueryCallBack="handleQueryCallBack" @addCallBack="addCallBack" @updateCallBack="updateCallBack" @deleteCallBack="deleteCallBack">
		</common-view>
		<el-dialog :visible="dialogVisible" width="70%" @close="dialogVisible=false" center>
			<div id="dialogPrint" style="">
				<table class="table" style="width:100%;height:100%;border:1px solid;align:center;font-size:15px; " border cellspacing="0" cellpadding="0">
					<caption style="font-size:24px;font-weight:bold;">清洗记录表({{dialogRow.or_name}})</caption>
					<tr align="center" style="height:60px">
						<td>操作人：</td>
						<td style="width:16%"><span>{{dialogRow.or_operator}}</span></td>
						<td>接收时间</td>
						<td><span>{{dialogRow.or_receive_time}}</span></td>
					</tr>
					<tr align="center" style="height:60px">
						<td>顶部淋雨压力(Mpa)：</td>
						<td><span>{{dialogRow.or_topRainPressBig}}</span></td>
						<td>顶部淋雨流量(m3/h)：</td>
						<td><span>{{dialogRow.or_topRainRateBig}}</span></td>
						<td>顶部浸雨压力(Mpa)：</td>
						<td><span>{{dialogRow.or_topRainPressSmall}}</span></td>
					</tr>
					<tr align="center" style="height:60px">
						<td>顶部浸雨流量(m3/h)：</td>
						<td><span>{{dialogRow.or_topRainRateSmall}}</span></td>
						<td>侧面淋雨压力(Mpa)：</td>
						<td><span>{{dialogRow.or_sideRainPress}}</span></td>
						<td>侧面淋雨流量(m3/h)：</td>
						<td><span>{{dialogRow.or_sideRainRate}}</span></td>
					</tr>
					<tr align="center" style="height:60px">
						<td>水质PH：</td>
						<td><span>{{dialogRow.or_waterPH}}</span></td>
						<td>环境温度°C：</td>
						<td><span>{{dialogRow.or_environmentTemperature}}</span></td>
						<td>环境湿度(%)：</td>
						<td><span>{{dialogRow.or_environmentHumidity}}</span></td>
					</tr>
					<tr align="center" style="height:60px">
						<td>雨量计1：</td>
						<td><span>{{dialogRow.or_rainGauge1}}</span></td>
						<td>雨量计2：</td>
						<td><span>{{dialogRow.or_rainGauge2}}</span></td>
						<td>雨量计3：</td>
						<td><span>{{dialogRow.or_rainGauge3}}</span></td>
					</tr>
					<tr align="center" style="height:60px">
						<td>雨量计4：</td>
						<td><span>{{dialogRow.or_rainGauge4}}</span></td>
						<td>雨量计5：</td>
						<td><span>{{dialogRow.or_rainGauge5}}</span></td>
						<td>备注：</td>
						<td><span>{{dialogRow.memo}}</span></td>
					</tr>
				</table>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="Print">打 印</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import CommonView from "@/components/common/CommonView.vue";
import print from 'print-js'//打印必须加上
export default {
	components: {
		CommonView,
	},
	data() {
		return {
			//页面组件配置
			//===================================================//
			//搜索框按钮
			//搜索框及搜索按钮是否展示
			searchSet: {
				searchButtenShow: true,
				labelWidth: "80px"
			},
			//搜索框配置及数据
			searchData: {
			},
			searchForm: [
				{
					type: "Input",
					label: "操作人",
					prop: "or_operator",
					width: "100px",
					placeholder: "",
					enternative: this.handleQuery, //按下enter执行的函数
				},
				{
					type: "Input",
					label: "试验名称",
					prop: "or_name",
					width: "100px",
					placeholder: "",
					enternative: this.handleQuery, //按下enter执行的函数
				},
				{
					type: "datetimerange",
					label: "接收时间",
					prop: "record_time",
					width: "350px",
					placeholder: "",
					enternative: this.handleQuery, //按下enter执行的函数
					change: (data) => {
						// alert(data)
					}
				}
			],
			//表格相关配置
			tableSet: {
				selection: true, //是否显示多选框
				showKey: true, //显示索引列
				idColum: "or_id", //（id）主键列名称
			},
			//表格表头数据
			//Object.freeze 百度去理解 提升性能并且禁止对于该对象的属性进行修改（
			columns: Object.freeze([
				{
					sortable: true,
					attrs: {
						prop: "or_receive_time",
						label: "接受时间",
						width: "160",
						align: "center",
						// "show-overflow-tooltip": true,
					},
				},
				{
					sortable: true,
					attrs: {
						prop: "or_operator",
						label: "操作人",
						// width: "140",
						align: "center",
						// "show-overflow-tooltip": true,
					},
				},
				{
					sortable: true,
					attrs: {
						prop: "or_name",
						label: "试验名称",
						// width: "140",
						align: "center",
						// "show-overflow-tooltip": true,
					},
				},
				{
					sortable: true,
					attrs: {
						prop: "or_topRainPressBig",
						label: "顶部淋雨压力(Mpa)",
						width: "100",
						align: "center",
					},
				},
				{
					sortable: true,
					attrs: {
						prop: "or_topRainRateBig",
						label: "顶部淋雨流量(m3/h)",
						width: "110",
						align: "center",
						// "show-overflow-tooltip": true,
					},
				},
				{
					sortable: true,
					attrs: {
						prop: "or_topRainPressSmall",
						label: "顶部浸雨压力(Mpa)",
						align: "center",
						width: "100",
					},
				},
				{
					sortable: true,
					attrs: {
						prop: "or_topRainRateSmall",
						label: " 顶部浸雨流量(m3/h)",
						align: "center",
						width: "110",
					},
				},
				{
					sortable: true,
					attrs: {
						prop: "or_sideRainPress",
						label: "侧面淋雨压力(Mpa)",
						align: "center",
						width: "100",
					},
				},
				{
					sortable: true,
					attrs: {
						prop: "or_sideRainRate",
						label: "侧面淋雨流量(m3/h)",
						align: "center",
						width: "110",
					},
				},
				{
					sortable: true,
					attrs: {
						prop: "or_waterPH",
						label: "水质PH",
						align: "center",
						width: "100",
					},
				},
				{
					sortable: true,
					attrs: {
						prop: "or_environmentTemperature",
						label: "环境温度°C",
						align: "center",
						width: "100",
					},
				},
				{
					sortable: true,
					attrs: {
						prop: "or_environmentHumidity",
						label: " 环境湿度(%)",
						align: "center",
					},
				},
				{
					sortable: true,
					attrs: {
						prop: "or_rainGauge1",
						label: "雨量计1",
						align: "center",
					},
				},
				{
					sortable: true,
					attrs: {
						prop: "or_rainGauge2",
						label: "雨量计2",
						align: "center",
					},
				},
				{
					sortable: true,
					attrs: {
						prop: "or_rainGauge3",
						label: "雨量计3",
						align: "center",
					},
				},
				{
					sortable: true,
					attrs: {
						prop: "or_rainGauge4",
						label: "雨量计4",
						align: "center",
					},
				},
				{
					sortable: true,
					attrs: {
						prop: "or_rainGauge5",
						label: "雨量计5",
						align: "center",
					},
				},
				{
					sortable: true,
					attrs: {
						prop: "memo",
						label: "备注",
						align: "center",
						width: "140px"
					},
				},
				{
					slot: "handle",
					attrs: {
						label: "操作",
						formatter: () => {
						},
						//不设置width 则自适应
						align: "center",
					},
					buttens: [
						{
							name: "打印预览",
							icon: "",
							handle: (row) => {
								this.openDialog(row);
							},
						},
					],
				},
			]),
			//新增编辑弹出框相关配置
			dialogSet: {
				title: "",
				isEdit: false,
				dialogVisible: false,
			},
			//新增编辑相关信息
			dialogFormData: {},
			//新增编辑form
			dialogForm: {
				labelWidth: "100px",
				inline: false,
				labelPosition: "right",
				size: "small",
				formItem: [

				],
			},
			downloadLoading: false,
			dataList: [],
			//传给dialog的row
			dialogRow: {},
			//页面逻辑参数等
			//=======================================================//
			//选中的行
			requestController: "OperationRecord",
			pageSearch: true, //是否分页
			dialogVisible: false,
			checkList: [],
			sprinklerBigList: [],
			sprinklersmallList: [],
			sprinklerLeftList: [],
			sprinklerRightList: [],
			spanClass: false,
			pId: 0,

		};
	},
	mounted: function () {

	},
	methods: {
		Print() {
			printJS({
				printable: 'dialogPrint',
				type: 'html',
				documentTitle: '',
				style: 'background:red',//传完整的.css 样式例如.checkboxClass {color: #fff;}
				scanStyles: false,
				targetStyles: ['*'],
				ignoreElements: ['no-print', 'bc', 'gb']
			})

		},
		openDialog(row) {
			this.dialogRow = row;
			this.dialogVisible = true;

		},
		handleQuery() {
			this.$refs.commonView.handleQuery();
		},
		//修正返回表格list数据(访问list返回成功回调)
		handleQueryCallBack(res) {
			this.dataList = res.bodyList;
		},
		///新增回调
		addCallBack(res) { },
		//更新回调
		updateCallBack(res) { },
		//删除回调
		deleteCallBack(res) { },
		Export() {
			this.downloadLoading = true;
			// this.downloadLoading=false;
		},
	},
};
</script>
<style lang="scss" >
.el-form-item {
	margin-bottom: 0px;
}
.checkbox {
	margin-top: 10px;
	width: 100px;
	margin-right: 5px;
}
.checkbox.is-bordered.is-checked {
	background-color: #409eff;
}
//多选框选中的默认字体颜色
.checkboxClass {
	color: #fff;
}
//隐藏了多选框的勾选框
// .el-checkbox__inner {
//   display: none;
// }
//多选框的默认字体颜色
.checkboxClassDefault {
	color: #606266;
}
.span {
	color: #fff;
}
</style>
